<template>
  <div class="head-container">
    <!-- <el-input class="head-input" type="text" size="medium" placeholder="请输入内容" suffix-icon="el-icon-search" v-model="input21"></el-input> -->
    <img
      @click="handleHeadImgClick"
      class="head-img"
      style="width:64px;height:64px;max-width:100%;"
      :src="require('@/assets/home_page/nav_control_large.png')"
    />
  </div>
</template>
<script>
export default {
  name: "Header",
  data() {
    return {
      input21: ""
    };
  },
  methods: {
    handleHeadImgClick() {
      this.$emit('headImgClick')
    }
  }
};
</script>
<style lang="less" scoped>
@media screen and (min-width: 100px) {
  .head-container {
    overflow: hidden;
    .head-img {
      width: 10px;
      height: 10px;
    }
  }
}
.head-container {
  color: white;
  height: 100%;
  /* margin: 10px */
}
.head-input {
  width: 200px;
}
.head-img {
  position: re;
  top: 0;
  left: 0;
}
</style>
